import React from 'react';
import styled from '@emotion/styled';

interface StepNodeProps {
	name: string;
	status: string; // done | doing | not-started
    isLast?: boolean; // 是否是最后一个节点
    id?: number;
}

// styled StepNode
const StepNodeWrapper = styled.div`
	display: flex;
	align-items: center;
	justify-content: space-between;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;

    .step-node-name {
        display: inline-block;
        position: absolute;
        width: 98px;
        bottom: 16px;
        left: 0;
    }

	.done {
		background-color: #67C23A;
	}
	.doing {
		background-color: #e6a23c;
        animation: flash 1s infinite;
	}
	.not-started {
		background-color: #d9d9d9;
	}
	.step-node-dot {
        width: 16px;
        height: 16px;
		border-radius: 50%;
        border: 1px solid #DCDFE6;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
	}

    @keyframes flash {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
`;

const Line = styled.span`
    display: inline-block;
    height: 2px;
    background-color: #b3b3b3;
    overflow: hidden; /* 防止伪元素溢出 */
    position: absolute;
    bottom: 6px;
    left: 16px;
    width: calc(100% - 16px);

    &:before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -1px; /* 高度一半的负值，使箭头居中 */
        border-top: 2px solid transparent; /* 创建透明三角形，用于箭头的上半部 */
        border-bottom: 2px solid transparent; /* 创建透明三角形，用于箭头的下半部 */
        border-left: 2px solid #b3b3b3; /* 箭头的颜色和大小 */
    }
`;

const StepNode = (props: StepNodeProps) => {
	const { name, status, isLast, id } = props;

	return (
		<StepNodeWrapper className={`${status}`} id={`step-node-${id}`}>
			<span className='step-node-name'>{name}</span>
			<div className={`step-node-dot ${status}`} />
            {!isLast && <Line />}
		</StepNodeWrapper>
	);
};

export default StepNode;
